<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
    .box{
        position: relative;
        box-sizing: border-box;
        padding: 50px;
        width: 400px;
        height: 350px;
        background-color: aqua;
        margin: 100px auto;
        outline: 2px solid red;
        overflow: hidden;
       
    }
    .box img{
        width: 400px;
        height: 350px;
        position: absolute;
        left: 0;
        top: 0;
        transition-duration: .5s;
    }
    .box img{
        transition: .5s;
    }
    .box:hover img{
        transform: scale(1.2);
    }



    .box h2{
            position: absolute;
            left: 50px;
            top:0; 
            font-weight: 400; 
            color: blanchedalmond; 
         }
    
    .box span{
         font-weight: 700;
    }
    p{
        position: relative;
        display: inline-block;
        left: -100%;
        background-color: white;
        line-height: 34px;
        margin-right: 5px;
        padding: 0 15px;
        transition-duration: .5s;

        
    }
     .box p:nth-of-type(2){
         transition-delay:.2s;
     }
     .box p:nth-of-type(3){
          transition-delay: .4s;
     }

    



    .box:hover p{
        left: 0;
    }
    a{
      position: absolute;
      top: 0;
      left: 0;
      width: 400px;
      height: 350px;
      

    }
    .box:hover a{
        background-color:rgba(0, 0, 0, .2);
    }




    


     </style>


</head>
<body>
      <div class="box">
            <img src="./img/21.jpg" alt="">
          <h2>PASSIONATE <span>JULIA</span></h2>
        <p>julia dances in the deep dark</p>
        <p>julia dances in the deep dark</p>
        <p>julia dances in the deep dark</p>
       <a href=""></a>

      </div>
 












</body>
</html>